<script setup>
const banners = [
  {
    image: '/uploads/banner1.png',
    alt: '轮播图1',
    link: '#'
  },
  {
    image: '/uploads/banner2.png',
    alt: '轮播图2',
    link: '#'
  },
  {
    image: '/uploads/banner1.png',
    alt: '轮播图3',
    link: '#'
  },
  {
    image: '/uploads/banner2.png',
    alt: '轮播图4',
    link: '#'
  }
]
</script>

<template>
<div class="banner">
    <div class="wrapper">
      <el-carousel
      indicator-position="outside"
      height="500px"
      class="custom-carousel"
    >
      <el-carousel-item v-for="(banner, index) in banners" :key="index">
        <a :href="banner.link" class="banner-link">
          <img
            :src="banner.image"
            :alt="banner.alt"
            class="banner-image"
          />
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</div>

</template>

<style scoped>

</style>
